<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE HTML>
<html>
  <head>  
    <title>宠物信息</title>
    	<script src="js/jquery-1.12.0.min.js"></script>
    	<script>
    		function changeSelect(op){
    			document.getElementById("petBreed").value=op;
    		}
    	</script>
    <c:if test="${listPet==null }">
    	<c:redirect url="GetAllPetServlet"></c:redirect>
    </c:if>
   <style type="text/css">
   		#info{border:1px black solid;width:350px;height:auto;margin:auto auto;background-color:#E2E8FF ;}
   		#content{
   				margin:auto auto;width:280px;height:auto;   			
   				}
   		#one{margin-left:35px;}   
   </style>
  </head>  
  <body onload="changeSelect('${petBreed}')">
   <div id="info">
   		<div id="content">
   		<form action="GetSomePetByPetBreedServlet">
   			<p>品种：
   		<select name="petBreed" id="petBreed">
   			<option value="-1">--请选择--</option>
   			<option value="1">狗</option>
   			<option value="2">猫</option>
   			<option value="3">鸟</option>
   			<option value="4">兔</option>
   		</select>
   	   <input type="submit" value="查询"/>
   	   <a href="petInfo.jsp">新增宠物</a>
   	</p>
   	<table border=1 id="one">
   		<tr>
   			<td>宠物昵称</td>
   			<td>出生日期</td>
   			<td>性别</td>
   		</tr>
   		<c:choose>
   			<c:when test="${fn:length(listPet)==0}">
   				<tr>
   					<td colspan="3">暂无数据</td>
   				</tr>
   			</c:when>
   			<c:otherwise>
   				<c:forEach items="${listPet }" var="pet" varStatus="status">
   			<c:choose>
   				<c:when test="${status.index%2==0 }">
   				<tr style="background-color:#BEC8E4">
		   			<td>${pet.petName }</td>
		   			<td>${pet.birthday }</td>
		   			<c:if test="${pet.petSex==1 }">
		   				<td>雄</td>
		   			</c:if> 
		   			<c:if test="${pet.petSex==2 }">
		   				<td>雌</td>
		   			</c:if> 		
   				 </tr>
   			</c:when>
   			<c:otherwise>
   			 	<tr>
	   			<td>${pet.petName }</td>
	   			<td>${pet.birthday }</td>
	   			<c:if test="${pet.petSex==1 }">
		   				<td>雄</td>
		   			</c:if> 
		   			<c:if test="${pet.petSex==2 }">
		   				<td>雌</td>
		   			</c:if> 
   		     </tr>   			
   			</c:otherwise>  	
   			</c:choose>		
   		</c:forEach>   		
   			</c:otherwise>
   		</c:choose>
   	</table>  
   		</form>
   		
   		</div>
   </div>
   
  </body>
</html>
